<script setup lang="ts">
import { ref } from "vue"
import { ElLoading, ElMessage } from "element-plus"
import dayjs from "dayjs"
import router from "../../../../../router"
import { createCraneOperationSign } from "../../../../../api/CraneOperation"

const signaturePadRef = ref(null)
const SignaturePadShow = ref(false)
const dialogTableVisible = ref(false)
const checkInfo = ref({})
const props = defineProps({
  id: String
})
const openModal = function() {
  SignaturePadShow.value = true
}
const closeModal = function() {
  dialogTableVisible.value = false
}
const openSignatureModal = function(row) {
  checkInfo.value = row
  dialogTableVisible.value = true
}
const closedModal = function() {
}

function submitSignature() {
  const { isEmpty, data } = signaturePadRef.value.saveSignature()
  if (isEmpty) {
    ElMessage.error("请签名")
  } else {
    dialogTableVisible.value = false
    SignaturePadShow.value = false
    signatureInfo.value[checkInfo.value] = data
    if (checkInfo.value == "zysqr" || checkInfo.value == "dzzh" || checkInfo.value == "jzjczry") {
      signatureInfo.value.zyfsqTime = dayjs().format("YYYY年MM月DD日HH时mm分")
    }
    if (checkInfo.value == "jhr") {
      signatureInfo.value.jhrTime = dayjs().format("YYYY年MM月DD日HH时mm分")
    }
    if (checkInfo.value == "sdjd") {
      signatureInfo.value.sdjdTime = dayjs().format("YYYY年MM月DD日HH时mm分")
    }
    if (checkInfo.value == "zypzr") {
      signatureInfo.value.zypzrTime = dayjs().format("YYYY年MM月DD日HH时mm分")
    }
    if (checkInfo.value == "qrr") {
      signatureInfo.value.xgfTime = dayjs().format("YYYY年MM月DD日HH时mm分")
    }
  }
}

const clearSign = function() {
  signaturePadRef.value.clearSignature()
}
const SubmitCraneOperation = function() {
  const loading = ElLoading.service({
    lock: true,
    text: "正在存储...",
    background: "rgba(0, 0, 0, 0.7)"
  })
  let params = {
    id: props.id,
    signatureDisclosure: JSON.stringify({
      aqjsjdr: signatureInfo.value.aqjsjdr,
      jsjdr: signatureInfo.value.jsjdr
    }),
    operatorApplication: JSON.stringify({
      zysqr: signatureInfo.value.zysqr,
      dzzh: signatureInfo.value.dzzh,
      jzjczry: signatureInfo.value.jzjczry,
      zyfsqTime: signatureInfo.value.zyfsqTime
    }),
    jobMonitoring: JSON.stringify({
      jhr: signatureInfo.value.jhr,
      jhrTime: signatureInfo.value.jhrTime,
      sdjd: signatureInfo.value.sdjd,
      sdjdTime: signatureInfo.value.sdjdTime
    }),
    ratify: JSON.stringify({
      zypzr: signatureInfo.value.zypzr,
      zypzrTime: signatureInfo.value.zypzrTime
    }),
    stakeholder: JSON.stringify({
      dw: signatureInfo.value.dw,
      qrr: signatureInfo.value.qrr,
      xgfTime: signatureInfo.value.xgfTime
    })
  }
  createCraneOperationSign(params).then(
    (res: { ret: boolean }) => {
    if (res.ret) {
        loading.close()
        router.push("/")
      }
    }
  )
}
const signatureInfo = ref({
  aqjsjdr: "",
  jsjdr: "",
  zysqr: "",
  dzzh: "",
  jzjczry: "",
  zyfsqTime: "",
  jhr: "",
  jhrTime: "",
  sdjd: "",
  sdjdTime: "",
  zypzr: "",
  zypzrTime: "",
  dw: "",
  qrr: "",
  xgfTime: ""
})
</script>
<template>
  <div class="w-full h-full">
    <el-card class="m-1">
      <template #header>
        <div class="flex items-center">
          <el-icon>
            <InfoFilled style="color: #79bbff" />
          </el-icon>
          <span class="mx-2.5 font-bold">交底签字</span>
        </div>
      </template>
      <el-row>
        <el-col :span="12">
          <span>安全技术交底人:</span>
          <span
            v-if="!signatureInfo.aqjsjdr"
            style="letter-spacing: 20px"
            class="text-center"
            @click="openSignatureModal('aqjsjdr')"
          >
            点击签字
          </span>
          <img
            v-if="signatureInfo.aqjsjdr"
            :src="signatureInfo.aqjsjdr"
            style="height: 50px; display: inline-block"
            @click="openSignatureModal('aqjsjdr')"
            alt="aqjsjdr" />
        </el-col>
        <el-col :span="12">
          <span>接受交底人：</span>
          <span
            v-if="!signatureInfo.jsjdr"
            style="letter-spacing: 20px"
            class="text-center"
            @click="openSignatureModal('jsjdr')"
          >
            点击签字
          </span>
          <img
            v-if="signatureInfo.jsjdr"
            :src="signatureInfo.jsjdr"
            style="height: 50px; display: inline-block"
            @click="openSignatureModal('jsjdr')"
            alt="jsjdr" />
        </el-col>
      </el-row>
    </el-card>
    <el-card class="m-1">
      <template #header>
        <div class="flex items-center">
          <el-icon>
            <InfoFilled style="color: #79bbff" />
          </el-icon>
          <span class="mx-2.5 font-bold">作业方申请</span>
          <span
          >本人已组织相关作业人员进行了工作安全分析，并在作业过程中负责落实各项风险消减措施，在作业结束时通知属地单位负责人。</span
          >
        </div>
      </template>
      <el-row>
        <el-col :span="7">
          <span>作业申请人:</span>
          <span
            v-if="!signatureInfo.zysqr"
            style="letter-spacing: 20px"
            class="text-center"
            @click="openSignatureModal('zysqr')"
          >
            点击签字
          </span>
          <img
            v-else
            style="height: 50px; display: inline-block"
            :src="signatureInfo.zysqr"
            @click="openSignatureModal('zysqr')"
            alt="zysqr"
          />
        </el-col>
        <el-col :span="7">
          <span>吊装指挥：</span>
          <span
            v-if="!signatureInfo.dzzh"
            style="letter-spacing: 20px"
            class="text-center"
            @click="openSignatureModal('dzzh')"
          >
            点击签字
          </span>
          <img
            v-else
            style="height: 50px; display: inline-block"
            :src="signatureInfo.dzzh"
            @click="openSignatureModal('dzzh')"
            alt="dzzh"
          />
        </el-col>
        <el-col :span="7">
          <span>机重机操作人员：</span>
          <span
            v-if="!signatureInfo.jzjczry"
            style="letter-spacing: 20px"
            class="text-center"
            @click="openSignatureModal('jzjczry')"
          >
            点击签字
          </span>
          <img
            v-else
            style="height: 50px; display: inline-block"
            :src="signatureInfo.jzjczry"
            @click="openSignatureModal('jzjczry')"
            alt="dzzh"
          />
        </el-col>
        <el-col :span="3">
          {{ signatureInfo.zyfsqTime }}
        </el-col>
      </el-row>
    </el-card>
    <el-card class="m-1">
      <template #header>
        <span class="flex items-center">
          <el-icon>
            <InfoFilled style="color: #79bbff" />
          </el-icon>
          <span class="mx-2.5 font-bold">作业监护监督</span>
          <span>本人已阅读许可证并且确认所有条件都满足，并承诺坚守现场。</span>
        </span>
      </template>
      <el-row>
        <el-col :span="6">
          <span>监护人:</span>
          <span
            v-if="!signatureInfo.jhr"
            style="letter-spacing: 20px"
            class="text-center"
            @click="openSignatureModal('jhr')"
          >
            点击签字
          </span>
          <img
            v-else
            style="height: 50px; display: inline-block"
            :src="signatureInfo.jhr"
            alt="jhr"
            @click="openSignatureModal('jhr')"
          />
        </el-col>
        <el-col :span="3">
          {{ signatureInfo.jhrTime }}
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="6">
          <span>属地监督：</span>
          <span
            v-if="!signatureInfo.sdjd"
            style="letter-spacing: 20px"
            class="text-center"
            @click="openSignatureModal('sdjd')"
          >
            点击签字
          </span>
          <img
            v-else
            style="height: 50px; display: inline-block"
            :src="signatureInfo.jhr"
            alt="jhr"
            @click="openSignatureModal('sdjd')"
          />
        </el-col>
        <el-col :span="3">
          {{ signatureInfo.sdjdTime }}
        </el-col>
      </el-row>
    </el-card>
    <el-card class="m-1">
      <template #header>
        <span class="flex items-center">
          <el-icon>
            <InfoFilled style="color: #79bbff" />
          </el-icon>
          <span class="mx-2.5 font-bold">批准</span>
          <span
          >我已经审核过本许可证的相关文件，并确认适合公司作业安全管理规定的要求，同时我与相关人员一同检查过现场并同意作业方案，因此，我同意作业。</span
          >
        </span>
      </template>
      <el-row>
        <el-col :span="6">
          <span>作业批准人:</span>
          <span
            v-if="!signatureInfo.zypzr"
            style="letter-spacing: 20px"
            class="text-center"
            @click="openSignatureModal('zypzr')"
          >
            点击签字
          </span>
          <img
            v-else
            style="height: 50px; display: inline-block"
            :src="signatureInfo.zypzr"
            alt="jhr"
            @click="openSignatureModal('zypzr')"
          />
        </el-col>
        <el-col :span="3">
          {{ signatureInfo.zypzrTime }}
        </el-col>
      </el-row>
    </el-card>
    <el-card class="m-1">
      <template #header>
        <div class="flex items-center">
          <el-icon>
            <InfoFilled style="color: #79bbff" />
          </el-icon>
          <span class="mx-2.5 font-bold">相关方</span>
          <span
          >本人确认收到许可证，了解该作业项目的安全管理要求及对本单位的影响，将安排相关人员对此项目给予关注，并和相关各方保持联系。</span
          >
        </div>
      </template>
      <el-row>
        <el-col :span="6">
          <span>单位:</span>
          <span
            v-if="!signatureInfo.dw"
            style="letter-spacing: 20px"
            class="text-center"
            @click="openSignatureModal('dw')"
          >
            点击签字
          </span>
          <img
            v-else
            style="height: 50px; display: inline-block"
            :src="signatureInfo.dw"
            alt="dw"
            @click="openSignatureModal('dw')"
          />
        </el-col>
        <el-col :span="6">
          <span>确认人:</span>
          <span v-if="!signatureInfo.qrr" style="letter-spacing: 20px" class="text-center"
                @click="openSignatureModal('qrr')">
            点击签字
          </span>
          <img
            v-else
            style="height: 50px; display: inline-block"
            :src="signatureInfo.qrr"
            alt="qrr"
            @click="openSignatureModal('qrr')"
          />
        </el-col>
        <el-col :span="3">
          {{ signatureInfo.xgfTime }}
        </el-col>
      </el-row>
    </el-card>
  </div>
  <el-button type="primary" class="absolute bottom-10 right-10" @click="SubmitCraneOperation"
  >下一步
  </el-button>
  <el-dialog
    v-model="dialogTableVisible"
    class="SignaturePad"
    :show-close="false"
    destroy-on-close
    top="40vh"
    width="800"
    @open="openModal"
    @closed="closedModal"
  >
    <template #header></template>
    <div class="w-[800px] h-[200px] flex justify-between">
      <div class="w-[800px] h-[220px] flex flex-col justify-around">
        <VueSignaturePad
          v-if="SignaturePadShow"
          ref="signaturePadRef"
          width="800px"
          height="150px"
          :custom-style="{
            backgroundColor: '#e6eef4',
            borderRadius: '15px'
          }"
        />
        <div class="flex justify-around">
          <button class="custom-btn btn-1" @click="closeModal">退出</button>
          <button class="custom-btn btn-3" @click="clearSign">清空</button>
          <button class="custom-btn btn-2" @click="submitSignature">确定</button>
        </div>
      </div>
    </div>
    <div></div>
  </el-dialog>
</template>

<style scoped>
.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
  7px 7px 20px 0px rgba(0, 0, 0, 0.1),
  4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
  font-size: 15px;
}

.btn-2 {
  background: #004dff;
  background: linear-gradient(0deg, #004dff 0%, #004dff 100%);
  border: none;
}

.btn-2:before {
  height: 0;
  width: 2px;
}

.btn-1 {
  background: #ff5252;
  background: linear-gradient(0deg, #ff5252 0%, #ff5252 100%);
  border: none;
}

.btn-3 {
  background: #2ac2d1;
  background: linear-gradient(0deg, #2ac2d1 0%, #2ac2d1 100%);
  border: none;
}

.btn-1:before {
  height: 0;
  width: 2px;
}

.confirmPerson {
  height: 20px !important;
}
</style>
